import React from "react"
import { Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined, } from '@ant-design/icons';

//上传图片之前对图片格式和大小进行限制
function beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
}

class Uploadimg extends React.Component {
    uploadRef = React.createRef()
    state = {
        loading: false,
        imageUrl: ""
    };

    handleChange = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.

            this.setState({
                loading: true,
                imageUrl: info.file.response.headimgurl
            })
            console.log({ ...this.uploadRef.current })
            //将值回传给Form.Item的关键方法
            this.props.onChange(info.file.response.headimgurl)
        }
    };

    render() {
        const { loading, imageUrl } = this.state;
       
        const uploadButton = (
            <div>
                {loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div style={{ marginTop: 8 }}>Upload</div>
            </div>
        );
        return (
            <Upload
                imgValue={"imageUrl"}
                ref={this.uploadRef}
                name="headimgurl"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="http://chst.vip/students/uploadStuAvatar"
                beforeUpload={beforeUpload}
                onChange={this.handleChange}
            >
                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
            </Upload>


        );
    }
}
export default Uploadimg